<script setup>
import { ref } from "vue"

const icon_list = ref([
	{
		name: "Home",
		className: "fa-solid fa-house",
		color: "845EC2",
	},
	{
		name: "User",
		className: "fa-solid fa-user",
		color: "D65DB1",
	},
	{
		name: "Love",
		className: "fa-solid fa-heart",
		color: "FF6F91",
	},
	{
		name: "Settings",
		className: "fa-solid fa-gear",
		color: "FF9671",
	},
	{
		name: "Search",
		className: "fa-brands fa-searchengin",
		color: "FFC75F",
	},
	{
		name: "Books",
		className: "fa-solid fa-book",
		color: "F9F871",
	},
])
</script>
<template>
	<div class="mouse_hover">
		<ul class="ul">
			<li v-for="(item, index) in icon_list" :key="index" :class="'icons-' + item.color">
				<div class="show">
					<i :class="item.className" class="i"></i>
					<span class="span">{{ item.name }}</span>
				</div>
			</li>
		</ul>
	</div>
</template>
<style scoped lang="scss">
.mouse_hover {
	$color: ("845EC2", "D65DB1", "FF6F91", "FF9671", "FFC75F", "F9F871");
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	.ul {
		position: relative;
        $size: 40px;
        $n: 3;
        $padding: 80px;
        display: flex;
        flex-wrap: wrap;
        width: calc($n * $size + $padding * ($n - 1));
		gap: $padding;
		@for $i from 1 through length($color) {
			.icons-#{nth($color, $i)} {
				$boxShadow: 5px;
				position: relative;
				color: unquote($string: "##{nth($color, $i)}");
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
                width: $size;
                height: $size;
				transition: all $animation-duration-05;
                &::after {
                    content: "";
					position: absolute;
					width: calc(100% + calc($boxShadow * 2.7 + 2px) * 2);
					height: calc(100% + calc($boxShadow * 2.7 + 2px) * 2);
					background-color: $all-bg-color;
					transform: rotate(45deg);
					transition: all $animation-duration-05;
                }
				&::before {
                    content: "";
					width: inherit;
					height: inherit;
					position: absolute;
					box-shadow: 0 0 0 $boxShadow unquote($string: "##{nth($color, $i)}"),
						0 0 0 calc($boxShadow * 2.7) $all-bg-color,
						0 0 0 calc($boxShadow * 2.7 + 2px) unquote($string: "##{nth($color, $i)}");
					transition: all $animation-duration-05;
                }

				&:hover::after {
					transform: scale(1.1) rotate(0deg);
				}
				&:hover::before {
					transform: scale(1.05);
				}
				.show {
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 10;
					.i {
						font-size: 2em;
						transition: all $animation-duration-05;
					}
					.span {
						position: absolute;
						opacity: 0;
						transform: scale(0) translateY(200%);
						transition: all $animation-duration-05;
					}
				}
				&:hover .show .i {
					transform: translateY(-40%);
					filter: drop-shadow(0 0 20px unquote($string: "##{nth($color, $i)}"))
					drop-shadow(0 0 40px unquote($string: "##{nth($color, $i)}"))
					drop-shadow(0 0 60px unquote($string: "##{nth($color, $i)}"));
				}
				&:hover .show .span {
					transform: scale(1) translateY(100%);
					opacity: 1;
				}
			}
		}
	}
}
</style>
